<%-- controller = game, action = view --%>
<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%
  Gson gson = new Gson();
  Context ctx = Context.get();
  Map game = (Map) ctx.data.get("game");
  Map creator = (Map) game.get("creator");
  List<Map> gbs = (List<Map>) game.get("game_board");
%>
<script type="text/javascript">
  $(document).ready(function() {
    ps.init('<%= game.get("id") %>', <%= gbs != null ? gson.toJson(gbs) : "[]" %>);
  });
</script>
<div class="game-edit-ps p-relative">
  <div>
    <h3 class="d-inline"><%= game.get("name") %></h3>
    <h4 class="d-inline">(<%= game.get("type") %>)</h4>
    created by <%= creator.get("full_name") %>
    <%
      if (gbs != null && gbs.size() > 0) {
    %>
    <a class="f-right" href="/game/play?id=<%= game.get("id") %>">play</a>
    <%
      }
    %>
  </div>
  <hr />
  <h4 class="d-inline">Game Boards</h4>
  <%
    if (creator.equals(ctx.account)) {
  %>
  <a onclick="ps.showCreateGameBoard()">create</a>
  <%
    }
  %>
  <div id="game_boards">
    <%
      if (gbs == null) {
    %>
    <div>
      None yet.
    </div>
    <%
      } else {
        for (int i = 0; i < gbs.size(); i++) {
          Map gb = gbs.get(i);
          String gb_id = "gb_" + gb.get("id");
    %>
    <div id="<%= gb_id %>" class="game-board <%= i % 2 == 0 ? "f-left" : "f-right" %>"
         onmouseover="$('#<%= gb_id %> button').show();"
         onmouseout="$('#<%= gb_id %> button').hide();">
      <button class="zoom d-none" onclick="ps.zoomGameBoard(<%= i %>, 160);">Zoom</button>
      <%
        if (creator.equals(ctx.account)) {
      %>
      <button class="delete d-none" onclick="ps.deleteGameBoard('<%= gb.get("id") %>')">Delete</button>
      <%
        }
      %>
      <canvas height="660px" width="440"></canvas>
      <script type="text/javascript">
        $(document).ready(function() {
          for (var s in s2e) {
            s2e[s].removed = ($.inArray(s, <%= gson.toJson(gb.get("removed_elements")) %>) >= 0);
          }
          $("#<%= gb_id %> canvas")[0].getContext("2d").drawTable(0, 0, 110, false);
        })
      </script>
    </div>
    <%
        }
    %>
    <%
      }
    %>
  </div>
  <div class="clear"></div>
  <%
    if (creator.equals(ctx.account)) {
  %>
  <div id="create" class="popup" style="left: 120px; top: 0;">
    <div class="popup-close"><a onclick="$(create).hide()">&#215;</a></div>
    <p class="a-center d-inline">
      Select one element from each column.
    </p>
    <p class="a-right"> Press
      <button onclick="ps.saveGameBoard();">
        create
      </button>
      when finished.
    </p>
    <hr />
    <div class="scroll p-relative" style="height: 480px;">
      <canvas width="640" height="960"></canvas>
    </div>
  </div>
  <%
    }
  %>
  <div id="zoom" class="zoom popup" style="left: 120px; top: 0; margin-bottom: 100px;">
    <div class="popup-close"><a onclick="$(zoom).hide()">&#215;</a></div>
    <canvas width="640" height="960"></canvas>
  </div>
</div>
<div class="clear"></div>
